/* CSS Document */
body{
	margin: 0;
	padding: 0;
	background: #576574;
}

.iconbtn{
	width: 60px;
	height: 60px;
	text-decoration: none;
	margin: 20px;
	position: relative;
	font-size: 30px;
	border-radius: 50%;
}
.iconbtn::before{
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.iconbtn::after{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 50%;
	z-index: 0;
}
.iconbtn{
	border: 3px solid #fff;
	color: #2f3640;
}
.iconbtn::after{
	background: #fff;
	transition: 0.2s;
}
.iconbtn:hover::after{
	transform: scale(.85);
}

.table {
        display: table;
        width: 100%;
        width: calc(100% - 30px);
        max-width: 400px;
        margin: auto;
        table-layout: fixed;
        text-align: left;
		color: #f5f6fa;
		background: #2f3640;
		border: 4px solid #c8d6e5;
		transform: scale(.9);
		border-radius: 15px;
    }
    .td {
        display: table-cell;
        padding: 5px;
    }

    input[type="checkbox"] {
        position: absolute;
        clip: rect(0 0 0 0);
    }
    .check-in,
    .check-out {
        color: #8395a7;
        cursor: pointer;
    }
    .check-out {
        display: none;
    }
    :checked ~ .check-out {
        display: inline-block;
    }
    :checked ~ .check-in {
        display: none;
    }

    .element {
	  background: #2f3640;
      max-height: 0;
      overflow: hidden;
      transition: max-height .5s;
    }

    :checked ~ .element {
      max-height: 666px;
    }